<template>
  <el-card shadow="never">
    <common-tabs :tabs-data="tabsData" @tab-click="handleClick" />
    <common-form
      ref="searchFormRef"
      :forms="formData"
      @query="handleQuery"
      @reset="resetQuery"
    />
    <common-button :button-left="buttonLeft" @click="clickBtn">
      <template #export>
        <el-dropdown class="dropdown-btn">
          <el-button> 批量导出 </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="exportData('all')"
                >导出全部</el-dropdown-item
              >
              <el-dropdown-item
                :disabled="approvalDisabled"
                @click="exportData('select')"
                >导出选中</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
      <template #exportInfo>
        <el-dropdown class="dropdown-btn">
          <el-button> 导出预约人信息 </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="exportPeopleData('all')"
                >导出全部</el-dropdown-item
              >
              <el-dropdown-item
                :disabled="approvalDisabled"
                @click="exportPeopleData('select')"
                >导出选中</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
    </common-button>
    <common-table
      :loading="tableLoading"
      :height="tableHeight"
      row-key="id"
      :data="tableData"
      :columns="tableColumns"
      @selection-change="selectionChange"
    >
      <!--      <template #apptUserSource="{ row: { apptUserSource } }">-->
      <!--        <span>{{-->
      <!--          getArrayLabel(APPT_USER_SOURCE_OPTIONS, apptUserSource)-->
      <!--        }}</span>-->
      <!--      </template>-->
      <!--      <template #approveResult="{ row: { approveResult } }">-->
      <!--        <span>{{ getArrayLabel(APPROVE_RESULT_OPTIONS, approveResult) }}</span>-->
      <!--      </template>-->
      <template #apptStartTime="{ row: { apptStartTime, apptEndTime } }">
        <span>{{ apptStartTime }} - {{ apptEndTime }}</span>
      </template>
      <template #operation="{ row }">
        <el-button text type="primary" @click="detailInfo(row)"
          >预约详情</el-button
        >
      </template>
    </common-table>
    <common-pagination
      :pagination-obj="paginationObj"
      :select-array="selectArray"
      @change="handleChange"
    />
    <DetailDialog
      v-model:visible="detailDialogVisible"
      :row="detailDialogRow"
    />
  </el-card>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import {
  basicFormData,
  basicColumns,
  APPT_USER_SOURCE_OPTIONS,
  APPROVE_RESULT_OPTIONS
} from "./tableData";
// import { getAgreeApi, getApprovalData } from "@/api/appt/approval";
// import { getArrayLabel } from "@/utils/array";
import { message } from "@/utils/message";
import DetailDialog from "@/views/permission/page/components/DetailDialog.vue";
// import { exportCommonData } from "@/utils/file/download";

const selectArray = ref([]);
const detailDialogVisible = ref(false);
const detailDialogRow = ref(null);
/** tab配置参数 */
const tabsData = ref([
  { label: "待审批", name: 0 },
  { label: "已审批", name: 1 },
  { label: "已过期", name: 4 },
  { label: "全部", name: "" }
]);
/** 按钮配置参数 */
const approvalDisabled = computed(() => {
  return !selectArray.value.length;
});
const buttonLeft = ref([
  { name: "批量同意", type: "primary", disabled: approvalDisabled },
  { slotName: "export" },
  { slotName: "exportInfo" }
]);
/** 查询表单配置参数 */
const searchFormRef = ref(null);
const formData = computed(() => {
  return basicFormData;
});
/** 表格配置参数 */
const tableColumns = computed(() => {
  return basicColumns;
});
const tableLoading = ref(false);
const tableData = ref(null);
const approveStatusTable = ref(0);
const tableHeight = computed(() => {
  return window.innerHeight - 485;
});

/** 分页配置参数 */
const paginationObj = ref({
  size: 10,
  page: 1,
  total: 0
});

/** 切换tab */
const handleClick = (tab: any) => {
  approveStatusTable.value = tab.props.name;
  initData();
};

/** 初始化加载表格数据 */
async function initData() {
  tableData.value = [{ name: 1 }];
  // tableLoading.value = true;
  // const params = {
  //   apptUserSource: 0,
  //   approveStatusTable: approveStatusTable.value,
  //   size: paginationObj.value.size,
  //   page: paginationObj.value.page,
  //   ...searchFormRef?.value?.getFormData()
  // };
  // const res = await getApprovalData(params);
  // if (res.code === 200) {
  //   paginationObj.value.total = res.data.total;
  //   tableData.value = res.data.data || [];
  //   tableLoading.value = false;
  // }
}

/** 表格操作详情 */
function detailInfo(row: any) {
  detailDialogRow.value = row;
  detailDialogVisible.value = true;
}
function selectionChange(newSelection: any[]) {
  selectArray.value = newSelection;
}
/** 点击按钮 */
function clickBtn(item: any) {
  const btnName = item.target.innerText;
  switch (btnName) {
    case "批量同意":
      agreeApproval();
      break;
  }
}

async function agreeApproval() {
  // const params = selectArray.value.map(item => {
  //   return {
  //     id: item.id
  //   };
  // });
  // const res = await getAgreeApi(params);
  // if (res.code === 200) {
  //   message("操作成功", { type: "success" });
  //   await initData();
  // }
}

/** 导出 */
function exportData(type: string) {
  const params = exportParams(type);
  // exportCommonData("/bg/export/exportAppointOrder", params, "预约记录", null);
}

function exportPeopleData(type: string) {
  const params = exportParams(type);
  // exportCommonData("bg/export/exportApptUser", params, "预约人信息", null);
}

function exportParams(type: string) {
  const param =
    type === "select"
      ? {
          apptUserSource: 0,
          approveStatusTable: approveStatusTable.value,
          idList: selectArray.value.map((item: any) => item.id)
        }
      : {
          apptUserSource: 0,
          approveStatusTable: approveStatusTable.value
        };
  return param;
}

/** 搜索按钮操作 */
function handleQuery() {
  initData();
}
/** 重置按钮操作 */
function resetQuery() {
  handleQuery();
}

/** 分页操作 */
function handleChange(currentPage: number, pageSize: number) {
  paginationObj.value.page = currentPage;
  paginationObj.value.size = pageSize;
  initData();
}
</script>

<style lang="scss" scoped>
.re-screen {
  margin-top: 12px;
}
.dropdown-btn {
  margin-right: 12px;
}
</style>
